/* eslint-disable no-undef */
import './index.css';
let all = document.querySelector('.filter');
//let ul = document.querySelector('.content > ul');
/* ul里<li>
    <img src=pic/>
    <p>2020西太湖国际音乐节</p>name
    <p>城市: 常州</p>city
    <p>地址: 常州西太湖中国花卉博览景区北门</p>address
    <p>价格: 199-399</p>price
    <p>演出时间: 2020.09.19-09.20</p>showTime
</li> */
let { list } = require('./data');
let num = 4; //一页显示几个
let i; //数据的下标
let total = list.length; //28
let pageTotal = 7; //一共多少页
let page = 1; //当前是第几页
function load() {
    //动态生成li生成后面的数据
    let endIdex = page * num;
    if (endIdex > total) endIdex = total;
    for (i = (page - 1) * num; i < endIdex; i++) {
        let o = list[i];
        let li = document.createElement('li');
        let img = document.createElement('img');
        li.appendChild(img);
        all.nextElementSibling.children[0].appendChild(li);
        for (const key in o) {
            //获取li里的信息
            if (key === 'pic') img.setAttribute('src', o[key]);
            if (key === 'name') {
                let p = document.createElement('p');
                p.innerText = o[key];
                li.appendChild(p);
            }
            if (key === 'city') {
                let p = document.createElement('p');
                p.innerText = '城市：' + o[key];
                li.appendChild(p);
            }
            setTimeout(() => {
                //调整数据的渲染顺序
                if (key === 'address') {
                    let p = document.createElement('p');
                    p.innerText = '地址：' + o[key];
                    li.appendChild(p);
                }
            });
            setTimeout(() => {
                if (key === 'price') {
                    let p = document.createElement('p');
                    p.innerText = '价格：' + o[key];
                    li.appendChild(p);
                }
            }, 1);
            setTimeout(() => {
                if (key === 'showTime') {
                    let p = document.createElement('p');
                    p.innerText = '演出时间：' + o[key];
                    li.appendChild(p);
                }
            }, 2);
        }
    }
}
load();
all.addEventListener('click', () => {
    if (event.target.localName === 'select') {
        //渲染一页
        num =
            all.lastElementChild.options[all.lastElementChild.selectedIndex]
                .value; //获取下拉框选中的值
        if (num != 4 || pageTotal != 7) {
            //清空之前渲染的数据
            while (all.nextElementSibling.children[0].firstChild)
                all.nextElementSibling.children[0].removeChild(
                    all.nextElementSibling.children[0].firstChild
                );
            pageTotal = Math.ceil(total / num);
            load();
            all.children[1].innerText = page + ' / ' + pageTotal;
        }
        if (pageTotal < page) page = 1;
    }
    if (event.target.className === 'next') {
        page++;
        if (page > pageTotal) {
            //防止点击过快
            page = pageTotal;
            return; //不再刷新页面
        }
        if (page != 1) {
            //all.children[0].classList.remove('disable')
            all.children[0].style.cursor = 'pointer';
            all.children[0].style.backgroundColor = 'skyblue';
        }
        if (page == pageTotal) {
            //event.target.classlist.toggle('disable')
            event.target.style.cursor = 'not-allowed';
            event.target.style.backgroundColor = '#ccc';
        }
        if (page < pageTotal + 1) {
            all.children[1].innerText = page + ' / ' + pageTotal;
            while (all.nextElementSibling.children[0].firstChild)
                all.nextElementSibling.children[0].removeChild(
                    all.nextElementSibling.children[0].firstChild
                );
            load();
        }
    }
    if (event.target.className === 'prev disable') {
        //需要写全类名！！！！！！！！！！！！！
        page--;
        if (page < 1) {
            //防止点击过快
            page = 1;
            return; //不再刷新页面
        }
        if (page == pageTotal - 1) {
            all.children[2].style.cursor = 'pointer';
            all.children[2].style.backgroundColor = 'skyblue';
        }
        if (page === 1) {
            all.children[0].style.cursor = 'not-allowed';
            all.children[0].style.backgroundColor = '#ccc';
        }
        if (page > 0) {
            all.children[1].innerText = page + ' / ' + pageTotal;
            while (all.nextElementSibling.children[0].firstChild)
                all.nextElementSibling.children[0].removeChild(
                    all.nextElementSibling.children[0].firstChild
                );
            load();
        }
    }
});
